
<template>
  <div class="global-box">
    <div class="rightIcon">
      <p style="cursor: pointer" @click="goInfo">
        <el-icon :size="20"><User /></el-icon>
        <span> 个人中心 </span>
      </p>
      <p style="cursor: pointer">
        <el-icon :size="20"><SwitchButton /></el-icon>
        <span @click="goLogin"> 退出登录 </span>
      </p>
    </div>
    <div class="global-box-top"></div>
    <div class="global-box-bottom"></div>
    <div class="global-box-main">
      <div class="global-box-main-left">
        <!-- 路网等级 -->
        <RoadNetworkClass />
        <!-- 评分排名 -->
        <Ranking :carData="leftCenterObj"></Ranking>
        <!-- 按钮 -->
        <leftBtn :carData="leftCenterObj"></leftBtn>
      </div>
      <div class="global-box-main-center">
        <BaiduMapBox></BaiduMapBox>
      </div>
      <div class="global-box-main-right">
        <!-- 洒落物排名 -->
        <RubbishStatistics :carData="rightTopEcharts"></RubbishStatistics>
        <!-- 台班分析 -->
        <Workanalysis :carData="righttBottomEcharts"></Workanalysis>
      </div>
    </div>
   
  </div>
</template>
<script lang="ts" >
// 页面组件拆分
import RoadNetworkClass from "./components/chlidren/roadNetworkClass.vue";
import Workanalysis from "./components/chlidren/workanalysis.vue";
import RubbishStatistics from "./components/chlidren/rubbishStatistics.vue";
import BaiduMapBox from "./components/chlidren/baiduMapBox.vue";
import LeftBtn from "./components/chlidren/leftBtn.vue";
import Ranking from "./components/chlidren/ranking.vue";
import { getInitChartData } from "@/api/sweepercar/global";
import { setLocalStorage } from "@/utils/storage";
import { defineComponent, reactive, toRefs, onMounted } from "vue";
import router from "@/router";
import { ElMessage } from "element-plus";
import axios from "axios";
export default defineComponent({
  components: {
    LeftBtn,
    RoadNetworkClass,
    Ranking,
    Workanalysis,
    RubbishStatistics,
    BaiduMapBox,
  },
  setup() {
    const data = reactive({
      leftCenterObj: {},
      rightTopEcharts: { name: [], value: [] },
      righttBottomEcharts: {
        currentMonthCount: [],
        lastMonthCount: [],
        orgName: [],
        analyzeShow:false
      },
    });
    // 页面数据
    const getCarClick = async () => {
      const res = await getInitChartData();
      const { status, message } = res;
      if (status === 0) {
        let { ranking, rubbishStatistics, workAnalysis } = res.data;
        data.leftCenterObj = ranking;
        data.rightTopEcharts = rubbishStatistics;
        data.righttBottomEcharts = workAnalysis;
        ElMessage.success("页面数据查询成功！");
      } else {
        ElMessage.error("查询失败！" + message);
      }
    };
    // 退出登录
    const goLogin = () => {
      setLocalStorage("token", "");
      setLocalStorage("userInfo", {});
      axios.defaults.headers.common["Authorization"] = "";
      router.push({ name: "Login" });
    };
    // 个人中心
    const goInfo = () => {
      console.log("点击了我");
      router.push("/info");
    };
    onMounted(() => {
      getCarClick();
    });
    return {
      goLogin,
      goInfo,
      ...toRefs(data),
    };
  },
});
</script>
<style scoped lang="less">
.global-box {
  position: relative;
  // width:100%;
  // height: 100%;
  background: url("../../../assets/images/sweepercar/beijing.png") no-repeat;
  .rightIcon {
    position: fixed;
    right: 5%;
    top: 5%;
    z-index: 2;
    display: flex;
    align-items: center;
    color: white;
    font-size: 1rem;
    > p {
      display: flex;
      align-items: center;
      padding: 0 0.2rem;
      .el-icon {
        color: #30f6ff;
      }
      span {
        padding: 0 0.1rem;
      }
    }
  }
  &-top {
    background: url("../../../assets/images/sweepercar/top.png") no-repeat;
    background-size: 100% 100%;
    background-position: top;
    position: absolute;
    width: 100%;
    height: 25%;
    top: 0;
  }
  &-center {
  }
  &-bottom {
    // background: url("../../../assets/images/sweepercar/footerLine.png")
    // no-repeat;
    background-size: 100% 100%;
    background-position: bottom;
    position: absolute;
    width: 100%;
    height: 25%;
    bottom: 0%;
  }
  &-main {
    position: absolute;
    width: 94%;
    height: 88%;
    top: 10%;
    left: 3%;
    display: flex;
    &-left {
      width: 25rem;
      // min-height: 46rem;
      box-sizing: border-box;
      overflow-y: auto;
      overflow-x: hidden;
    }
    &-center {
      flex: 1;
      height: 100%;
    }
    &-right {
      width: 25rem;
      height: 100%;
    }
  }
}
</style>